<template>
    <div style="margin: 0 10px">
        <div class="toolbar">
            <div class="operation">
                <el-button type="primary" size="small" @click="edit.id = 0; edit.visible = true">添加</el-button>
            </div>
            <div class="filter">
                <div><el-input placeholder="名称" clearable v-model.trim="filter.name" size="small" /></div>
                <div>
                    <el-button type="primary" size="small" @click="doQuery()">查询</el-button>
                    <el-button size="small" @click="doQuery(true)">重置</el-button>
                </div>
            </div>
        </div>

        <el-table v-loading = "loading" :data="list" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="created_at" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="edit.id = scope.row.id; edit.visible = true"  type="text" size="mini">编辑</el-button>
                    <el-button @click="erase(scope.row.id)" type="text" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="table" :current-page.sync="currentPage" :page-size.sync="pageSize" :pager-count="11"
                       background layout="total, sizes, prev, pager, next" :total="totalPage">
        </el-pagination>

        <Edit v-if="edit.visible" :id="edit.id" @close="edit.visible = false" @reload="get"></Edit>

    </div>
</template>

<script>
    import axios from 'axios'
    import Edit from './Edit'

    export default {
        components: {Edit},
        data() {
            return {
                loading: false,
                currentPage: 1,
                totalPage: 0,
                pageSize: 10,
                filter: {name: null},
                list: [],

                edit: {
                    visible: false,
                    id: 0
                }
            }
        },
        created() { this.get(); },
        watch: {
            currentPage() { this.get(); },
            pageSize() { this.get(); }
        },
        methods: {
            doQuery(reset) {
                if (reset) {
                    this.filter.name = null;
                }
                this.currentPage === 1 ? this.get() : (this.currentPage = 1);
            },
            async get() {
                this.loading = true;
                const params = {page: this.currentPage, size: this.pageSize, filter: this.filter};
                const result = await axios.get('/sys/group', {params});
                this.loading = false;
                this.totalPage = result.total;
                this.list = result.list;
            },
            async erase(id) {
                if (confirm('确定删除?')) {
                    await axios.delete('/sys/group/' + id);
                    this.get();
                }
            }
        }
    }
</script>
